﻿@model IEnumerable<PescarShop_1.Models.Producto>
@{
   ViewBag.Title = "Página principal";
}

<html>
<head>
   <title>YoursGames</title>

</head>

<body style="background-image: url(http://1.bp.blogspot.com/-Gr65A-j-ZW8/Um_sFrvoQLI/AAAAAAAAM7s/vbKouxZTIsM/s1600/Assassins-creed-4-black-flag-71.jpg)">
   <h2>@ViewBag.Message</h2>

   <p>
       <b>@ViewBag.Saludo</b>
   </p>


    <form id="Busqueda" data-bind="submit: Busqueda" class="form-search">
        <label>
            <span>Buscar un producto: </span>
            <input type="text" name="term" data-bind='value: term, valueUpdate: "afterkeydown"' class="input-medium search-query" />
        </label>
    </form>
<!-- ko if: term -->
<h2> <span data-bind="text: term"></span></h2>
<!-- /ko -->


   @foreach (var p in Model)
   {
       <div style="background-color: rgba(255, 255, 255, 0.78)">
           <div class="media">
               <a class="pull-left" href="~/Home/Productos/@p.ID" target="_blank">
                   <img src="@Url.Content("~/Content/Productos/" + p.ID + ".jpg")" class="img-polaroid" height="250" width="250" /> 
               </a>
               <div class="media-body">
                   <a href="~/Home/Productos/@p.ID">
                       <h4 class="media-heading">@p.Nombre
                       </h4>
                   </a>
                   @p.Descripcion

                   <div>

                       @using (var db = new PescarShop_1.Models.ShopContext())
                       {
                           {
                            <img src="@Url.Content("~/Content/Marcas/" + p.MarcaID + ".jpg")" height="70" width="70" />
                           <br />
                           @p.Marca.Descripcion
                          
                           
                       }
                       }
                   </div>

               </div>
           </div>
       </div>

   }


    @section scripts {
   <script type="text/javascript">

       function ViewModel() {
           var self = this;
           self.productos = ko.observableArray();
           self.term = ko.observable("");

           self.buscar = function () {
               $.ajax({
                   url: "@Url.Content("~/Api/WebApi/Busqueda")",
                   data: { term: self.term() }, // no tengo información adicional que transmitir en el GET
                   success: function (data, textStatus, jqXHR) {
                       console.log("resultado", data);
                       self.productos(data);
                   },
                   dataType: "json"
               });

       }

           self.term.subscribe(function (newValue) { self.buscar(); });
       }

       $(document).ready(function () {
           vm.buscar();
       });

       var vm = new ViewModel();
       ko.applyBindings(vm);

   </script>
}
</body>

</html> 
